<script setup>
  import { reactive, ref } from 'vue';
 
 let forms = ref('');
 let formData = reactive({});
 let arrForms = reactive([]);
 
 function save() {
  const selectedData = {};
  for (const key in formData) {
    if (Object.prototype.hasOwnProperty.call(formData, key)) {
      if (typeof formData[key] === 'object') {
        selectedData[key] = {};
        for (const subKey in formData[key]) {
          if (Object.prototype.hasOwnProperty.call(formData[key], subKey) && formData[key][subKey]) {
            selectedData[key][subKey] = true;
          }
        }
      } else {
        selectedData[key] = formData[key];
      }
    }
  }
  console.log(selectedData);
 }

 function build() {
  let arr = JSON.parse(forms.value);
  arrForms.splice(0, arrForms.length); 
  arr.forEach(item => {
    if (item.type === 'checkbox') {
      formData[item.name] = {};
      item.options.forEach(option => {
        formData[item.name][option] = false; 
      });
    } else {
      formData[item.name] = ''; 
    }
    arrForms.push(item); 
  });
 }
</script>

<template>
  <div>
    <div class="top">
      <textarea v-model="forms" name="" id="" cols="30" rows="10"></textarea>
    </div>
    <form action="">
      <table>
        <template v-for="(item, index) in arrForms" :key="index">
          <tr v-if="item.type === 'text' || item.type === 'textarea'">
            <td>
              <label>{{ item.label }}：</label>
            </td>
            <td>
              <input v-if="item.type === 'text'" type="text" v-model="formData[item.name]" class="input">
              <textarea v-else-if="item.type === 'textarea'" v-model="formData[item.name]" class="input"></textarea>
            </td>
          </tr>
          <tr v-else-if="item.type === 'radio'">
            <td>
              <label>{{ item.label }}：</label>
            </td>
            <td>
              <label v-for="(option, idx) in item.options" :key="idx">
                <input type="radio" :value="option" v-model="formData[item.name]">
                {{ option }}
              </label>
            </td>
          </tr>
          <tr v-else-if="item.type === 'checkbox'">
            <td>
              <label>{{ item.label }}：</label>
            </td>
            <td>
              <label v-for="(option, idx) in item.options" :key="idx">
                <input type="checkbox" :value="option" v-model="formData[item.name][option]">
                {{ option }}
              </label>
            </td>
          </tr>
          <tr v-else-if="item.type === 'select'">
            <td>
              <label>{{ item.label }}：</label>
            </td>
            <td>
              <select v-model="formData[item.name]">
                <option v-for="(option, idx) in item.options" :key="idx" :value="option">
                  {{ option }}
                </option>
              </select>
            </td>
          </tr>
        </template>
        <tr>
          <td></td>
          <td>
            <input type="button" value="提交表单" @click="save" class="save">
            <input type="button" value="生成表单" @click="build" class="build">
          </td>
        </tr>
      </table>
    </form>
  </div>
</template>

